<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="4" class="fix-list">
        <el-collapse v-model="activeName">
          <el-collapse-item v-for="(item,index) in partitionList" :key="index" :title="item.partitionname+'('+item.partitioncode+')'" :name="item.partitionid">
            <el-radio-group v-model="radio">
              <el-radio @change="radioClick" class="block" v-for="(ele,i) in item.warehouseareas" :label="ele.areaid" :key="i">{{ele.areaname}}</el-radio>
            </el-radio-group>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="20" v-loading="status_loading" class="right-list">
        <el-form ref="refForm" :model="formData">
          <!-- <el-collapse v-model="activeTitle" @change="handleChange"> -->
          <!-- <el-collapse-item :title="$t('m.container.user')" name="1"> -->
          <h2 class="title">{{$t('m.container.user')}}</h2>
          <el-table ref="table1"
            stripe
            empty-text
            fits
            class="single-select-table"
            :data="formData.userList"
            :row-style="tableRowStyle"
            :row-class-name="tableRowClassName"
            @selection-change="handleSingleSelectionChange">
            <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
            <el-table-column align="center" :label="$t('m.charge')">
              <template slot-scope="scope">
                <el-form-item size="mini" :prop="'userList.'+scope.$index+'.userid'">
                  <el-select filterable v-model="scope.row.userid" :disabled="scope.row.disabled">
                    <el-option :disabled="item.isdisabled" v-for="(item,index) in userFilterList" :key="index" :label="item.username" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('m.state')" prop="logstate"></el-table-column>
            <el-table-column align="center" :label="$t('m.container.date')" prop="logintime"></el-table-column>
            <el-table-column align="center" :label="$t('m.container.suspendingtime')" prop="suspendingtime"></el-table-column>
            <el-table-column align="center" :label="$t('m.operation')">
              <template slot-scope="scope">
                <el-button v-if="scope.row.logstate=='Log_in'" size="mini" @click.native.prevent="save(scope.row,'suspend',scope.$index)">SUSPEND</el-button>
                <el-button type="primary" v-if="scope.row.logstate=='Suspending'" size="mini" @click.native.prevent="save(scope.row,'login',scope.$index)">LOG IN</el-button>
                <el-button type="danger" v-if="scope.row.logstate=='Log_in'||scope.row.logstate=='Suspending'" size="mini" @click.native.prevent="save(scope.row,'logout',scope.$index)">LOG OUT</el-button>
                <el-button v-if="!scope.row.logstate" size="mini" @click.native.prevent="save(scope.row,'save',scope.$index)">Save</el-button>
                <el-button v-if="!scope.row.logstate" size="mini" @click.native.prevent="cancelUser(scope.$index),'cancel'">Cancel</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div align="left" v-if="obj.opt==='assign'">
            <el-button type="primary" @click.stop="addUserRow">{{$t('m.add')}}</el-button>
          </div>
          <!-- </el-collapse-item> -->
          <!-- <el-collapse-item :title="$t('m.container.truck')" name="2"> -->
          <h2 class="title" style="margin-top:50px">{{$t('m.container.truck')}}</h2>
          <el-table
            ref="table2"
            stripe
            empty-text
            fits
            class="single-select-table"
            :data="formData.truckuserList"
            :row-style="tableRowStyle"
            :row-class-name="tableRowClassName"
            @selection-change="handleSingleSelectionChange">
            <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
            <el-table-column align="center" :label="$t('m.charge')">
              <template slot-scope="scope">
                <el-form-item size="mini" :prop="'truckuserList.'+scope.$index+'.userid'">
                  <el-select filterable v-model="scope.row.userid" :disabled="scope.row.disabled">
                    <el-option :disabled="item.isdisabled" v-for="(item,index) in truckFilterList" :key="index" :label="item.username" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('m.state')" prop="logstate"></el-table-column>
            <el-table-column align="center" :label="$t('m.container.date')" prop="logintime"></el-table-column>
            <el-table-column align="center" :label="$t('m.container.suspendingtime')" prop="suspendingtime"></el-table-column>
            <el-table-column align="center" :label="$t('m.operation')">
              <template slot-scope="scope">
                <el-button v-if="scope.row.logstate=='Log_in'" size="mini" @click.native.prevent="save(scope.row,'suspend',scope.$index)">SUSPEND</el-button>
                <el-button type="primary" v-if="scope.row.logstate=='Suspending'" size="mini" @click.native.prevent="save(scope.row,'login',scope.$index)">LOG IN</el-button>
                <el-button type="danger" v-if="scope.row.logstate=='Log_in'||scope.row.logstate=='Suspending'" size="mini" @click.native.prevent="LOGOUT(scope.row,'logout')">LOG OUT</el-button>
                <el-button v-if="!scope.row.logstate" size="mini" @click.native.prevent="save(scope.row,'save',scope.$index)">Save</el-button>
                <el-button v-if="!scope.row.logstate" size="mini" @click.native.prevent="cancelTruck(scope.$index)">Cancel</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div align="left" v-if="obj.opt==='assign'">
            <el-button type="primary" @click.stop="addTruckRow">{{$t('m.add')}}</el-button>
          </div>
          <!-- </el-collapse-item> -->
          <!-- </el-collapse> -->
        </el-form>

        <div class="btns">
          <el-button type="primary" @click="back">{{$t('m.back')}}</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  data(){
    return {
      status_loading:false,
      formData:{},
      id:null,
      userList:[],
      partitionList:[],
      activeName:'',
      radio:'',
      userFilterList:[],
      truckFilterList:[],
      activeTitle:['1', '2']
    }
  },
  props:['obj'],
  watch:{},
  computed:{},
  methods:{
    userFilter(){
      this.userFilterList = JSON.parse(JSON.stringify(this.userList))
      this.formData.userList.forEach(e => {
        this.userFilterList.forEach(v => {
          if (e.userid === v.id){
            Object.assign(v, { isdisabled:true })
          }
        })
      })
      this.truckFilterList = JSON.parse(JSON.stringify(this.userList))
      this.formData.truckuserList.forEach(e => {
        this.truckFilterList.forEach(v => {
          if (e.userid === v.id){
            Object.assign(v, { isdisabled:true })
          }
        })
      })
    },
    back(){
      let obj = {
        componentName:'scheduling'
      }
      this.$emit('switchComponent', obj)
    },
    getUser(){
      this.$axios({
        method:'get',
        url:`/user/list`
      }).then(({ data }) => {
        this.userList = data
        this.userFilter()
      })
    },
    getPartition(){
      return new Promise((resolve) => {
        this.$axios({
          method:'get',
          url:`/areascheduing/partition/list`
        }).then(({ data }) => {
          this.partitionList = data.filter((v) => {
            return v.warehouseareas.length > 0
          })
          let partitionid = this.partitionList[0].partitionid
          let areaid = this.partitionList[0].warehouseareas[0].areaid
          resolve({ partitionid, areaid })
        })
      })
    },
    save(row, option, index){
      row.arrangetype = 'PC'
      let obj = JSON.parse(JSON.stringify(row))
      if (!obj.userid){
        this.$message.error(this.$t('m.choose') + this.$t('m.charge'))
      } else {
        // if (option === 'save') {
        //   obj.username = this.userList.filter(v => {
        //     return v.id == obj.userid
        //   })[0].username
        // }
        if (option === 'save' || option === 'login'){
          obj.logstate = 'Log_in'

        }
        if (option === 'suspend'){
          obj.logstate = 'Suspending'
          delete obj.suspendingtime
          delete obj.logintime
        }
        if (option === 'logout'){
          obj.logstate = 'Log_out'
        }
        this.$axios({
          method:'post',
          url:'/areascheduing/update',
          data:[obj]
        }).then((data) => {
          if (option === 'save' || option === 'suspend' || option === 'login'){
            if (data.data.usertype === 'AREA'){
              data.data.logintime = common.timestampToTime(data.data.logintime)
              data.data.suspendingtime = common.timestampToTime(data.data.suspendingtime)
              this.formData.userList.splice(index, 1, data.data)
            }
            if (data.data.usertype === 'TRUCK'){
              data.data.logintime = common.timestampToTime(data.data.logintime)
              data.data.suspendingtime = common.timestampToTime(data.data.suspendingtime)
              this.formData.truckuserList.splice(index, 1, data.data)
            }
          }
          if (option === 'logout'){
            if (data.data.usertype === 'AREA'){
              this.formData.userList.splice(index, 1)
            }
            if (data.data.usertype === 'TRUCK'){
              this.formData.userList.splice(index, 1)
            }
          }
          this.$message({
            type:'success',
            message:this.$t('m.quality.success')
          })
        })
      }
    },
    cancelUser(index){
      this.formData.userList.splice(index, 1)
      this.userFilter()
    },
    cancelTruck(index){
      this.formData.truckuserList.splice(index, 1)
      this.userFilter()
    },
    addUserRow(){
      this.formData.userList.push({
        areaid:this.id,
        arrangetype:'PC',
        logstate:'',
        userid:null,
        //username: '',
        usertype:'AREA',
        disabled:false
      })
      this.userFilter()
    },
    addTruckRow(){
      this.formData.truckuserList.push({
        areaid:this.id,
        arrangetype:'PC',
        logstate:'',
        userid:null,
        //username: '',
        usertype:'TRUCK',
        disabled:false
      })
      this.userFilter()
    },
    getInfo(id){
      this.id=id
      this.status_loading = true
      this.$axios({
        method:'get',
        url:`/areascheduing/area/${id}`
      }).then(({ data }) => {
        data.userList.forEach(v => {
          v.logintime = common.timestampToTime(v.logintime)
          v.suspendingtime = common.timestampToTime(v.suspendingtime)
          v.disabled = true
        })
        data.truckuserList.forEach(v => {
          v.logintime = common.timestampToTime(v.logintime)
          v.suspendingtime = common.timestampToTime(v.suspendingtime)
          v.disabled = true
        })

        this.formData = data
        this.status_loading = false
      })
    },
    radioClick(val){
      this.getInfo(val)
    }
  },
  async activated(){
    let { partitionid, areaid } = await this.getPartition()
    this.getUser()
    if (this.obj.id){
      this.id = this.obj.id
      this.activeName = this.obj.partitionid
      this.radio = this.id
      this.getInfo(this.id)
    } else {
      this.activeName = partitionid
      this.radio = areaid
      this.id = areaid
      this.getInfo(this.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.title {
  margin-bottom: 30px;
}
table .el-form-item--mini.el-form-item,
table .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
::v-deep.el-radio {
  width: 130px;
  margin-bottom: 5px;
}
::v-deep.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      height: 80%;
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
::v-deep.abow_dialog {
  .left {
    position: fixed;
    width: 250px;
    top: 10%;
  }
}
::v-deep.abow_dialog {
  .right {
    width: 870px;
    position: absolute;
    right: 0;
    padding-bottom: 30px;
    .btns {
      position: fixed;
      bottom: 10%;
      left: 50%;
    }
  }
}

::v-deep.container .el-collapse-item__header {
  font-size: 14px !important;
  padding-left: 20px;
}
.el-radio.block {
  display: block;
  text-align: left;
  margin-left: 30px;
  margin-bottom: 10px;
}
::v-deep.container .el-radio__label {
  text-transform: none !important;
}
::v-deep.container .fix-list .el-collapse {
  height: 600px;
  overflow-y: scroll;
}
::v-deep.container .el-collapse-item__content {
  text-align: left;
  padding-bottom: 0;
}
.el-radio-group {
  width: 100%;
}
.fix-list {
  position: fixed;
  width: 250px;
}
.right-list {
  margin-left: 250px;
}
</style>